<!--时间差-->
<template>
    <div class="time-difference">
        <el-form>
            <el-form-item label="时间差=">
                <el-select size="mini" v-model="value1" @change="changePlaceholder">
                    <el-option
                        v-for="item in value1List"
                        :key="item.value"
                        :value="item.value"
                        :label="item.label"></el-option>
                </el-select>
                -
                <el-select size="mini" v-model="value2" @change="changePlaceholder">
                    <el-option
                        v-for="item in value2List"
                        :key="item.value"
                        :value="item.value"
                        :label="item.label"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item class="center">
                <el-select size="mini" v-model="value3" @change="changePlaceholder">
                    <el-option
                        v-for="item in value3List"
                        :key="item.value"
                        :value="item.value"
                        :label="item.label"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="取值描述">
                <el-input type="textarea" style="width: 90%" rows="8" :placeholder="placeholderValue" readonly></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: 'TimeDifference',
        data () {
            return {
                tempList: [],
                value1: '',
                value1List: [
                    {
                        value: '1',
                        label: '系统时间'
                    }
                ],
                value2: '',
                value2List: [
                    {
                        value: '1',
                        label: '系统时间'
                    }
                ],
                value3: '',
                value3List: [
                    {
                        value: '1',
                        label: '年'
                    }, {
                        value: '2',
                        label: '季度'
                    }, {
                        value: '3',
                        label: '月'
                    }, {
                        value: '4',
                        label: '天'
                    }, {
                        value: '5',
                        label: '时'
                    }, {
                        value: '6',
                        label: '分'
                    }, {
                        value: '7',
                        label: '秒'
                    }
                ],
                placeholderValue: '',
                prependVal: '',
                prependVal1: '',
                centerVal: '',
                centerVal1: '',
                appendVal: '',
                columnInfo: [],
                pageMode: ''
            }
        },
        props: {
            menuId: {
                type: String
            }
        },
        methods: {
            // 获取对应标签值
            getLabel (dataList, val) {
                let label = ''
                dataList.forEach(item => {
                    if (item.value === val) {
                        label = item.label
                    }
                })
                return label
            },
            // 新增保存时间字段
            saveColumnInfo (val) {
                this.handleTreeValue(val)
                this.value1 = '1'
                this.value2 = this.value2List.length > 2 ? this.value2List[1].value : this.value2List[0].value
                this.value3 = '1'
                this.placeholderValue = `计算 【${this.value1List[0].label}】 与 【${this.value2List[1].label}】 相差的年数\n注: 只取年份进行计算\n示例: 2020年09月02日 — 2018年12月30日=2020年 — 2018年=2年`
                let param = {
                    value1: this.value1,
                    value2: this.value2,
                    value3: this.value3,
                    text: this.placeholderValue,
                    pageMode: sessionStorage.getItem('pageMode')
                }
                this.$emit('getTimeDifference', param)
            },
            // 编辑接收值
            editData (dataValue) {
                debugger
                this.value1 = dataValue.value1
                this.value2 = dataValue.value2
                this.value3 = dataValue.value3
                this.placeholderValue = dataValue.text
                let param = {
                    value1: this.value1,
                    value2: this.value2,
                    value3: this.value3,
                    text: this.placeholderValue,
                    pageMode: sessionStorage.getItem('pageMode')
                }
                this.$emit('getTimeDifference', param)
            },
            // 接收树的值并进行处理
            handleTreeValue (treeValue) {
                this.columnInfo = treeValue
                console.info(this.columnInfo[0])
                this.tempList = this.columnInfo[0].children
                if (this.tempList.length > 0) {
                    this.tempList.forEach(item => {
                        this.value1List.push({
                            value: item.enName,
                            label: item.name
                        })
                        this.value2List.push({
                            value: item.enName,
                            label: item.name
                        })
                    })
                }
            },
            changePlaceholder () {
                debugger
                this.getMethodValue()
                this.placeholderValue = `计算${this.prependVal1}\n注: ${this.centerVal1}\n示例: ${this.appendVal}`
                let param = {
                    value1: this.value1,
                    value2: this.value2,
                    value3: this.value3,
                    text: this.placeholderValue,
                    pageMode: sessionStorage.getItem('pageMode')
                }
                this.$emit('getTimeDifference', param)
            },
            // 根据对应方式生成拼接的标签值
            getMethodValue () {
                this.prependVal = this.getLabel(this.value1List, this.value1)
                this.centerVal = this.getLabel(this.value2List, this.value2)
                switch (this.value3) {
                    case '1':
                        this.prependVal1 = `【${this.prependVal}】与【${this.centerVal}】相差的年数`
                        this.centerVal1 = '只取年份进行计算'
                        this.appendVal = '2020年09月02日 — 2018年12月30日=2020年 — 2018年=2年'
                        break
                    case '2':
                        this.prependVal1 = `【${this.prependVal}】与【${this.centerVal}】相差的季度数`
                        this.centerVal1 = '只取年季度/季度进行计算'
                        this.appendVal = '2020年09月02日 — 2018年12月30日=2020年3季度 — 2018年4季度=7季度\n' +
                            '           09月02日 — 01月30日=3季度— 1季度=2季度'
                        break
                    case '3':
                        this.prependVal1 = `【${this.prependVal}】与【${this.centerVal}】相差的月份数`
                        this.centerVal1 = '只取年月/月进行计算'
                        this.appendVal = '2020年09月02日 — 2018年12月30日=2020年09月 — 2018年12月=21月\n' +
                            '           09月02日 — 01月30日=09月 — 01月=8月'
                        break
                    case '4':
                        this.prependVal1 = `【${this.prependVal}】与【${this.centerVal}】相差的天数`
                        this.centerVal1 = '若不满24小时记为0天'
                        this.appendVal = '2020年09月02日00:00 — 2020年08月30日14:00=34小时=1天'
                        break
                    case '5':
                        this.prependVal1 = `【${this.prependVal}】与【${this.centerVal}】相差的小时数`
                        this.centerVal1 = '若不满60分钟记为0小时'
                        this.appendVal = '2020年09月02日00:00 — 2020年09月01日21:12=168分钟=2小时'
                        break
                    case '6':
                        this.prependVal1 = `【${this.prependVal}】与【${this.centerVal}】相差的分钟数`
                        this.centerVal1 = '若不满60秒记为0分钟'
                        this.appendVal = '2020年09月02日00:00:00 — 2020年09月01日23:58:20=100秒=1分钟'
                        break
                    case '7':
                        this.prependVal1 = `【${this.prependVal}】与【${this.centerVal}】相差的秒数`
                        this.centerVal1 = '若不满1000毫秒记为0秒'
                        this.appendVal = '24:00:00:0000 — 23:59:58:0020=1980毫秒=1秒'
                        break
                }
            }
        },
        created () {
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .time-difference
        .el-form
            margin-top 10px
            .el-form-item
                margin-bottom 0px
            .center
                margin-left 65px
                margin-bottom 10px
            .el-textarea__inner
                margin-left -4px
</style>
